<template>
	<view>
		<!-- 顶部面板背景 一直能用 -->
		<view class="top">
			<uni-search-bar :radius="110" placeholder="请输入需要搜索的内容">
				<uni-icons slot="searchIcon" color="#2f81fa" size="18" type="search"
					style="position: absolute; right: 40rpx; top: 15rpx;" />
			</uni-search-bar>

			<!-- 列表 -->
			<view style="display: flex; justify-content: space-around; color: #fff; line-height: 90rpx;">


				<view>
					<!-- 自定义下拉框 -->
					<select class="custom-select" v-model="state">
						<option value="-1">维修状态🔽</option>
						<option value="0">已完成</option>
						<option value="1">未完成</option>
						<option value="2">已取消</option>
					</select>
				</view>

				<view>
					<!-- 自定义下拉框 -->
					<select class="custom-select" v-model="type">
						<option value="-1">选择维修方式🔽</option>
						<option value="0">上门维修</option>
						<option value="1">到店维修</option>
						<option value="2">预约维修</option>
					</select>
				</view>
				<!-- 
				<view style="display: flex;">
					<u-icon name="calendar-fill" color="#fff" size="28"></u-icon>
					<view>日期</view>
				</view> -->
			</view>
		</view>
		<view v-for="(item,index) in maintainList">
			<uni-card style="position: relative; top: -120rpx; border-radius: 30rpx;"
				v-if="(type==-1||item.type==type)&&(state==-1||item.maintainState==state)">
				<view style="margin: 30rpx 5rpx;padding-bottom: 16rpx; border-bottom: 12rpx solid #f7f7f7;"><span
						style="font-size: 36rpx; color: black;font-weight: 500;">维修单号:{{item.number}}</span><span
						style="float: right; color: blue;">{{item.maintainState==0?'已完成':item.maintainState==1?'未完成':'已取消'}}</span>
				</view>

				<view style="display: flex;">
					<view class="left">
						<view>维修方式:{{item.type==0?'上门维修':item.type==1?'到店维修':'预约维修'}}</view>
						<view>预约日期:{{item.subscribeTime}}</view>
					</view>
					<view class="right">
						<u-button @click="todetail(item.id)" type="primary" shape="circle"
							style="width: 190rpx;height: 65rpx;" text="查看详情"></u-button>
					</view>
				</view>

			</uni-card>
		</view>








	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopId: '',
				maintainList: [],
				state: '-1',
				type: '-1'
			};
		},
		onLoad() {
			this.shopId = uni.getStorageSync("shopId");
			this.getList()
		},
		methods: {
			todetail(id) {
				uni.navigateTo({
					url: '../xiangqing/xiangqing?id=' + id
				});
			},
			getList() {
				let that = this
				this.$http({
					url: '/api/repair/shopId/getmaintain?shopId=' + this.shopId,
					method: 'get',
					success(res) {
						that.maintainList = res.data.cheMaintains
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.left {
		margin-right: 112rpx;
		font-size: 25rpx;
	}

	.right {
		margin-top: 14rpx;
		margin-left: 20rpx;
	}

	.top {
		padding-right: 20rpx;
		padding-left: 20rpx;
		height: 320rpx;
		background-color: #2f81fa;
		padding-top: 60rpx;
	}

	.custom-select1 {
		width: 210rpx;
		padding: 8px 10px;
		font-size: 14px;
		background: transparent;
		color: #fff;
		border: none;
		border-radius: 50px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: none;

		cursor: pointer;
		transition: all 0.3s ease;
	}

	.custom-select {
		width: 240rpx;
		padding: 8px 10px;
		font-size: 14px;
		background: transparent;
		color: #fff;
		border: none;
		border-radius: 50px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: none;

		cursor: pointer;
		transition: all 0.3s ease;
	}

	.custom-select:hover {
		transform: scale(1.05);
	}

	.custom-select option {
		color: #000;
		/* 设置选项字体为黑色 */
		font-size: 14px;
		padding: 8px;
	}

	.custom-select1 option {
		color: #000;
		/* 设置选项字体为黑色 */
		font-size: 14px;
		padding: 8px;
	}

	/* 美化选择框的下拉箭头 */
	.custom-select::-ms-expand {
		display: none;
	}

	.custom-select:focus {
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	}

	.custom-select:focus option {
		background-color: #f0f0f0;
	}
</style>